
            <div class="row">
                <div class="col-12">
                    <div>
                        <h1>Form Settings</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li>Forms</li>
                            <li class="active">Form Settings</li>
                        </ol>
                    </div>
                </div>
            </div>

        <section class="ajax-container">
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default tab-container">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-gear"></i> Form Settings</h2>
                        </div>
                        <div class="panel-body tabs tabs-top">
                            <ul  class="nav nav-tabs">
                                <li class="active"><a href="#form-settings-container" data-toggle="tab"><i class="fa fa-bars"></i> <span class="hidden-xs">Settings</span></a></li>
                                <li><a href="#code" data-toggle="tab"><i class="fa fa-code"></i> <span class="hidden-xs">Code</span></a></li>
                                <li><a href="#google-code" data-toggle="tab"><i class="fa fa-code"></i> <span class="hidden-xs">Pretty Code</span></a></li>
                            </ul>
                            <div class="tab-content media-body">
                                <div id="form-settings-container" class="tab-pane active form-container">
                                    <form class="form-vertical form-bordered form-condensed form-column">
                                        <fieldset class="col-3">
                                            <legend>Inputs</legend>
                                            <ul>
                                                <li class="form-group row shown-default">
                                                    <label for="bold-label" class="control-label col-12">Bold Label</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="bold-label" id="bold-label" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="label-position" class="control-label col-12">Labels Position</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="label-position" id="label-position" class="form-control input-sm">
                                                                    <option value="align-left">Left</option>
                                                                    <option value="align-center">Center</option>
                                                                    <option value="align-right" selected>Right</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="icon" class="control-label col-12">Icon</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="icon" id="icon" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row icon-setting shown-default">
                                                    <label for="icon-position" class="control-label col-12">Icon Position</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="icon-position" id="icon-position" class="form-control input-sm">
                                                                    <option value="left" selected>left</option>
                                                                    <option value="right">right</option>
                                                                    <option value="both">left &amp; right</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="input-size" class="control-label col-12">Input Horizontal Size</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="input-size" id="input-size" class="form-control input-sm">
                                                                    <optgroup label="static sizing">
                                                                        <option value="x-small">x-small</option>
                                                                        <option value="small">small</option>
                                                                        <option value="medium">medium</option>
                                                                        <option value="large">large</option>
                                                                        <option value="x-large">x-large</option>
                                                                    </optgroup>
                                                                    <optgroup label="dynamic sizing">
                                                                        <option value="col-2">2 columns</option>
                                                                        <option value="col-3">3 columns</option>
                                                                        <option value="col-4">4 columns</option>
                                                                        <option value="col-5">5 columns</option>
                                                                        <option value="col-6">6 columns</option>
                                                                        <option value="col-7">7 columns</option>
                                                                        <option value="col-8">8 columns</option>
                                                                        <option value="col-9">9 columns</option>
                                                                        <option value="col-0">10 columns</option>
                                                                        <option value="col-11">11 columns</option>
                                                                        <option value="col-12" selected>12 columns</option>
                                                                    </optgroup>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="input-vertical-size" class="control-label col-12">Input Vertical Size</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="input-vertical-size" id="input-vertical-size" class="form-control input-sm">
                                                                    <option value="input-sm">small</option>
                                                                    <option value="" selected>medium</option>
                                                                    <option value="input-lg">large</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="input-position" class="control-label col-12">Input Position</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="input-position" id="input-position" class="form-control input-sm">
                                                                    <option value="pull-left" selected>Left</option>
                                                                    <option value="align-center">Center</option>
                                                                    <option value="pull-right">Right</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>

                                        <fieldset class="col-3">
                                            <legend>Elements</legend>
                                            <ul>
                                                <li class="form-group row shown-default">
                                                    <label for="legend" class="control-label col-12">Legend</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="legend" id="legend" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row legend-setting shown-default">
                                                    <label for="bold-legend" class="control-label col-12">Bold Legend</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="bold-legend" id="bold-legend" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row legend-setting shown-default">
                                                    <label for="legend-position" class="control-label col-12">Legend Position</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="legend-position" id="legend-position" class="form-control input-sm">
                                                                    <option value="align-left" selected>Left</option>
                                                                    <option value="align-center">Center</option>
                                                                    <option value="align-right">Right</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="button-position" class="control-label col-12">Buttons Position</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="button-position" id="button-position" class="form-control input-sm">
                                                                    <option value="align-left">Left</option>
                                                                    <option value="align-center">Center</option>
                                                                    <option value="align-right" selected>Right</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>

                                        <fieldset class="col-3">
                                            <legend>Styles</legend>
                                            <ul>
                                                <li class="form-group row inline-setting hidden-default">
                                                    <label for="inline-orientation" class="control-label col-12">Inline Orientation</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="inline-orientation" id="inline-orientation" class="form-control input-sm">
                                                                    <option value="" selected> - default - </option>
                                                                    <option value="inline-top">in-line top</option>
                                                                    <option value="inline-bottom">in-line bottom</option>
                                                                    <option value="stacked-left">stacked left</option>
                                                                    <option value="stacked-right">stacked right</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row vertical-setting horizontal-setting shown-default">
                                                    <label for="bordered" class="control-label col-12">Bordered</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="bordered" id="bordered" class="switch form-control" data-on-text="yes" data-off-text="no" checked>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row vertical-setting horizontal-setting border-setting shown-default">
                                                    <label for="striped" class="control-label col-12">Striped</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="striped" id="striped" class="switch form-control" data-on-text="yes" data-off-text="no">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row vertical-setting horizontal-setting shown-default">
                                                    <label for="condensed" class="control-label col-12">Condensed</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size col-12">
                                                            <div class="input-group">
                                                                <input type="checkbox" name="condensed" id="condensed" class="switch form-control" data-on-text="yes" data-off-text="no">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>

                                        <fieldset class="col-3">
                                            <legend>General Settings</legend>
                                            <ul>
                                                <li class="form-group row shown-default">
                                                    <label for="columns" class="control-label col-12">Columns</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="columns" id="columns" class="form-control input-sm">
                                                                    <option value="1" selected>1 Column</option>
                                                                    <option value="2">2 Columns</option>
                                                                    <option value="3">3 Columns</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row horizontal-setting hidden-default">
                                                    <label for="ratio" class="control-label col-12">Label Input Ratio</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="ratio" id="ratio" class="form-control input-sm">
                                                                    <option value="2">2:10</option>
                                                                    <option value="3">3:9</option>
                                                                    <option value="4">4:8</option>
                                                                    <option value="5">5:7</option>
                                                                    <option value="6">6:6</option>
                                                                    <option value="7">7:5</option>
                                                                    <option value="8">8:4</option>
                                                                    <option value="9">9:3</option>
                                                                    <option value="10">10:2</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="form-group row shown-default">
                                                    <label for="orientation" class="control-label col-12">Orientation</label>
                                                    <div class="control-group col-12">
                                                        <div class="input-size">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-list-alt"></i></span>
                                                                <select name="orientation" id="orientation" class="form-control input-sm">
                                                                    <option value="form-inline">Inline</option>
                                                                    <option value="form-vertical" selected>Vertical</option>
                                                                    <option value="form-horizontal">Horizontal</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </fieldset>
                                         <div class="submit-group col-12 align-right">
                                            <input type="button" name="reset" id="reset" class="btn btn-primary" value="Reset">
                                        </div>
                                    </form>
                                </div>
                                <div id="code" class="tab-pane no-padding">
                                    <pre id="copy-code" class="code-container">&nbsp;</pre>
                                </div>
                                <div id="google-code" class="tab-pane no-padding">
                                    <pre id="pretty-code" class="prettyprint linenums">&nbsp;</pre>
                                </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Form Preview</h3>
                            </div>
                            <div id="form-settings" class="panel-body form-container">
<div class="guideline form-guideline guideline-sticky bg-info">
    <i class="fa fa-info-circle fa-lg"></i> Fields marked with <code>*</code> are required.
</div>
<form class="form-vertical form-bordered">
    <fieldset>
        <legend>Column 1</legend>
        <ul>
            <li class="form-group row">
                <label for="photo" class="control-label col-12">
                    Photo <br>
                    <small>(.jpg .png .gif)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                <img src="<?= base_url() ?>resources/images/no_image.gif" data-src="<?= base_url() ?>resources/images/no_image.gif" alt="...">
                            </div>
                            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                            <div>
                                <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="photo" id="photo"></span>
                                <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="username" class="control-label col-12">
                    Username* <br>
                    <small>(must be unique)</small>
                </label>
                <div class="control-group input-center col-12">
                    <div class="input-size col-12">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" name="username" id="username" class="form-control" placeholder="Username">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="password" class="control-label col-12">
                    Password* <br>
                    <small>(pci password)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                            <input type="password" name="password" id="password" class="form-control" placeholder="P4ssw0rd">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="confirm-password" class="control-label col-12">
                    Confirm Password* <br>
                    <small>(must match with password)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-unlock"></i></span>
                            <input type="password" name="confirm-password" id="confirm-password" class="form-control" placeholder="Retype Password">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="first-name" class="control-label col-12">
                    First Name* <br>
                    <small>(alpha characters)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size col-12">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" name="first-name" id="first-name" class="form-control" placeholder="Mark Angelo">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="last-name" class="control-label col-12">
                    Last Name* <br>
                    <small>(alpha characters)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size col-12">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" name="last-name" id="last-name" class="form-control" placeholder="Angulo">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="address" class="control-label col-12">
                    Address* <br>
                    <small>(alpha-numeric characters)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-home"></i></span>
                            <input type="text" name="address" id="address" class="form-control" placeholder="#143 Purok 15, Irisan Baguio City">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="gender" class="control-label col-12">
                    Gender* <br>
                    <small>(male/female)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="radio">
                            <label class="control-label"><input type="radio" name="gender" value="Male" checked="checked">Male</label>
                        </div>
                        <div class="radio">
                            <label class="control-label"><input type="radio" name="gender" value="Female">Female</label>
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="birthdate" class="control-label col-12">
                    Birth Date* <br>
                    <small>(mm/dd/yyyy)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" name="birthdate" id="birthdate" class="form-control" placeholder="Birth Date">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="mobile" class="control-label col-12">
                    Mobile* <br>
                    <small>(Philippine format)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                            <input type="text" name="mobile" id="mobile" class="form-control" placeholder="(+63)926-408-5811">
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="country" class="control-label col-12">
                    Country* <br>
                    <small>(Select One)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                            <select name="country" id="country" class="form-control">
                                <option value=""> - Select Country - </option>
                                <option value="PH">Philippines</option>
                                <option value="US">United States</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>
            <li class="form-group row">
                <label for="about" class="control-label col-12">
                    About <br>
                    <small>(Optional)</small>
                </label>
                <div class="control-group col-12">
                    <div class="input-size">
                        <textarea name="about" id="vertical-about" class="form-control" placeholder="About..."></textarea>
                    </div>
                </div>
            </li>
        </ul>
    </fieldset>
    <div class="submit-group col-12 align-right">
        <input type="submit" name="submit" class="btn btn-primary" value="Submit">
        <input type="button" name="cancel" class="btn btn-default" value="Cancel">
    </div>
</form>

                            </div>
                        </div>
                    </div>
                </section>
                <!-- page-script -->
                <script type="text/javascript" src="<?= base_url() ?>js/scripts/form-settings.js"></script>
            </div>
